16814
7956 
Ik ben een absolute beginner, heb twee weken zelfstudie gedaan ter voorbereiding op een bootcamp die over een maand komt. In een poging mijn vaardigheden te verbeteren en "te leren denken als een ontwikkelaar", heb ik een project aangenomen dat probeert een reëel probleem op te lossen.
Mijn vrouw heeft een bedrijf dat haar facturen voor haar klanten moet genereren. Ik probeer HTML en JavaScript te gebruiken om een ​​webgebaseerde applicatie te bouwen waarmee ze snel aangepaste facturen kan maken in plaats van ze elke keer handmatig uit te schrijven.
In de huidige versie vraagt ​​een prompt om een ​​nummer van haar. Dit aantal genereert een gelijk aantal rijen met drie kolommen in HTML. Hierdoor kan ze de factuur aanpassen met het exacte aantal velden dat ze nodig heeft.
Kolom 1 bevat de productnaam. In dezelfde rij bevat kolom 2 het aantal eenheden, terwijl kolom 3 de totale kosten van dat product bevat, de basisprijs vermenigvuldigd met het aantal eenheden. Ik wil dat deze berekening plaatsvindt met een klik op de knop. Maar ik zit vast.
Om de wiskunde uit te voeren, moet ik de gehele getallen uit elke rij en kolom kunnen halen en deze in een functie kunnen doorgeven. Maar omdat elke rij en kolom automatisch is gegenereerd, hebben ze geen unieke attributen en kunnen ze daardoor niet worden geïdentificeerd. Ik kan de wiskunde in elke kolom uitvoeren, maar niet in elke rij.
Omdat ik zo nieuw ben en alleen heb geleerd van een paar inleidende Codecademy-cursussen en enkele YouTube-video's, weet ik niet hoe ik moet beoordelen of ik het project helemaal verkeerd benader, of dat er een truc is die ik mis, of als er gewoon iets is dat nog niet is geleerd. Als iemand met enige expertise me in de goede richting zou kunnen duwen, zou ik het erg op prijs stellen!
Ik heb alle code aan dit bericht toegevoegd. Excuses als het een vreselijke puinhoop is. Doe het rustig aan, ik ben een beginner!
const invDate = Datum ();
var field = " " +
" " +
"  
 
";
document.getElementById ('newInvoice'). onclick = function () {
let facticedName = prompt ('Aan wie is deze factuur opgemaakt?', 'Voer een naam in');
let productFields = Number (prompt ('Hoeveel productnamen op deze factuur?', 'Geef een nummer op'));
let fields = ''
laat dynHtml = ''
if (invoicedName! = null && productFields! = null) {
voor (let i = 1; i <= productFields; i ++) {
velden + = veld};
} else {alert ('Voer geldige invoer in.');
};
dynHtml = "
  
 
" +
"
 FACTUUR 
" +
"
 Voorbereid voor: " + factuurnaam + ", op" +
"
" + invDate + "
 
 
" +
velden + "
 
" +
" 
";
document.write (dynHtml);
document.getElementById ('berekenen'). onclick = function getQtyFields () {
let qtyInputs = document.getElementsByName ('qty'),
resultQty = 0;
for (let j = 0; j
2020-12-15 08:10:57 
Zoals u al zei, is uw belangrijkste probleem het vinden van een manier om elk invoerveld in hun eigen rij een eigen unieke identificatie te geven. Op deze manier kunt u de prijs voor elke rij berekenen en deze in het prijsveld invoegen.
Je moet eerst beginnen met de velden:
var field = " " +
" " +
"  
 
";
document.getElementById ('newInvoice'). onclick = function () {
...
voor (let i = 1; i <= productFields; i ++) {
velden + = veld};
...
};
Elke groep heeft zijn eigen identifier nodig. Op die manier kunt u later naar elke invoer in elke rij verwijzen om de subtotaalprijs te berekenen. Het class-attribuut is iets dat u aan meerdere elementen kunt toewijzen om er later naar te verwijzen. Deze klasse kan van alles zijn, zolang het niet conflicteert met de klasse voor een andere rij. U kunt de i van de lus gebruiken als uw identifier, aangezien deze bij elke lus verandert.
voor (let i = 1; i <= productFields; i ++) {
var field = " " +
" " +
"  
 
";
velden + = veld
};
Hierdoor wordt de klassenrij {i} aan elk veld in elke rij toegevoegd. Beter nog, je kunt dit refactoren naar zijn eigen functie
functie genererenFields (i) {
return " " +
" " +
"  
 
";
}
voor (let i = 1; i <= productFields; i ++) {
velden + = GenereerFields (i);
};
U krijgt iets dat lijkt op de volgende html
 
 
  
 

 
 
  
 

 
 
  
 

Nu kunt u in uw berekenfunctie naar deze rijen verwijzen en hun prijs berekenen. Hier kun je de invoervelden voor 'item' doorlopen.
document.getElementById ('berekenen'). onclick = function getQtyFields () {
let itemInputs = document.getElementsByName ('item')
for (let i = 0; i )
for (let i = 0; i